<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>登录系统</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #51499c, #24c6db);
    }

    .browser-happy {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #54c4e5;
      z-index: 999;
      padding: 50px;
      text-align: center;
      color: #fff;
      font-size: 24px;
    }

    .container {
      width: 500px;
      margin: 0 auto;
      max-width: 100%;
      padding-top: 80px;
    }

    .container .main {
      border-radius: 5px;
      background: rgba(255, 255, 255, .08);
      box-sizing: border-box;
      padding: 50px 100px;
    }

    .main-title {
      text-align: center;
      margin-bottom: 30px;
      color: #fff;
      font-size: 24px;
      -webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.3));
      box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.3));
    }

    .in-con {
      position: relative;
    }

    .in-forget {
      text-align: center;
      margin-top: 20px;
    }

    .in-forget a {
      color: #efefef;
      text-decoration: none;
      font-size: 12px;
    }

    .in-forget a:hover {
      color: #fff;
      text-decoration: underline
    }

    .in-con i {
      position: absolute;
      display: block;
      left: 14px;
      top: 13px;
      width: 14px;
      height: 14px;
      background: url('./images/login-icons.png') no-repeat;
      background-size: 100%;
      background-position: 0 1px;
    }

    .in-con i.key {
      background-position: 0 -28px;
    }

    .in-con input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #ccc;
      height: 40px;
      margin-bottom: 24px;
      border-radius: 40px;
      background: rgba(255, 255, 255, .08);
      color: #fff;
      outline: none;
      padding-left: 40px;
      font-size: 16px;
      transition: all .3s linear;
    }

    .in-con input:focus {
      color: #fff;
      border-color: #fff;
      background: rgba(255, 255, 255, .12);
    }

    .in-con input:focus+i {
      background-position: 0 -14px;
    }

    .in-con input:focus+i.key {
      background-position: 0 -42px;
    }

    input::-webkit-input-placeholder {
      color: #cfcfcf;
    }

    .in-con input:focus::-webkit-input-placeholder {
      color: #fff;
    }

    .in-con .btn-login {
      display: block;
      width: 100%;
      height: 40px;
      background: linear-gradient(to bottom, #e0f0f0, #a1e4f7);
      border-radius: 40px;
      line-height: 40px;
      text-align: center;
      color: #2daecf;
      text-decoration: none;
    }

    .in-con .btn-login:hover {
      background: linear-gradient(to bottom, #fff, #c2f2ff);
    }
  </style>
</head>

<body>
  <!--[if lt IE 11]>
    <div class="browser-happy">
      <div class="content">
        <p>本站不支持IE 11以下浏览器，请使用chrome.</p>
      </div>
    </div>
  <![endif]-->


  <div class="container">
    <div class="main-title">欢迎登录后台管理系统</div>
    <div class="main">
      <div class="in-con">
        <input type="text" id="username" placeholder="请输入用户名" autofocus>
        <i></i>
      </div>
      <div class="in-con">
        <input type="password" id="password" placeholder="密码">
        <i class="key"></i>
      </div>
      <div class="in-con">
        <a href="javascript:void(0)" id="btn-login" class="btn-login">登 录</a>
      </div>
      <div class="in-con in-forget">
        <a href="#">忘记密码?</a>
      </div>
    </div>
  </div>


  <script>
    function login() {
      var username = document.querySelector("#username").value,
        password = document.querySelector("#password").value;

      if (!username || !password) {
        alert('请输入用户名密码');
        return false;
      }

      var xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var data = JSON.parse(xhr.responseText);

          if (data.code == 0) {
            window.location.href = '/';
          } else {
            alert('登录失败');
          }
        } else if (xhr.readyState == 4 && xhr.status == 401) {
          alert('授权码已过期，请刷新页面重试!');
        }
      }

      xhr.open('GET', '/rs/login?remember=1&username=' + username + "&password=" + password, true);
      xhr.setRequestHeader('content-key', 'a35a1281e2cb8e6c519a8f4943ba8f9b');
      xhr.send();
    }

    document.querySelector("#btn-login").addEventListener("click", function () {
      login();
    });

    document.addEventListener('keydown', function () {
      if (event.keyCode == 13) {
        login();
      }
    });
  </script>

</body>

</html>